<template>
    <view>
        <view class="cu-modal bottom-modal" :class="modalNameDetail=='bottomModal'?'show':''" @tap="hideModal">
            <view class="cu-dialog" @tap.stop="">
                <view class="cu-bar bg-white">
                    <view class="action text-green" @tap="confirm">确定</view>
                    <view class="action text-blue" @tap="hideModal">取消</view>
                </view>
                <view class="container">
                    <scroll-view class="scroll-region" scroll-y>
                        <!-- 展示caiLiaoData的数据，以卡片的形式展示，每个卡片的左侧的第一项是一个复选框按钮 -->
                        <view class="cu-list menu-avatar">
                            <view class="cu-item" v-for="(item,index) in caiLiaoData" :key="index">
                                <!-- <view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.caiLiaoGuiGe+')'}]"></view> -->
                                <!-- checked="true" -->
                                <view class="cu-avatar">
                                    <checkbox value="cb"  />    
                                </view>
                                
                                <view class="content">
                                    <view class="text-black">物料水表编号：{{item.caiLiaoCode}}</view>
                                    <view class="text-black">物料水表：{{item.caiLiaoCode}}</view>
                                    <view class="text-black flex">
                                        规格型号：{{item.caiLiaoName}}
                                        <!-- <view class="text-cut"></view> -->
                                    </view>
                                    <view class="text-gray flex">
                                        <view class="flex-sub">需求数量：</view>
                                        <input placeholder="请输入需求数量" name="input" v-model="item.caiLiaoGuiGe" :focus="true" class="text-red flex-twice"></input>
                                    </view>
                                    <view class="text-gray flex">
                                        <view class="flex-sub">收货数量：</view>
                                        <input placeholder="请输入收货数量" name="input" v-model="item.caiLiaoGuiGe" :focus="true" class="text-red flex-twice"></input>
                                    </view>
                                    
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
		props: {
			modalNameDetail:{
				type: String,
				default: 'bottomModal'
			}
        },
        data() {
            return {
                // modalName:'bottomModal',
				imgList:[],
				date: '2018-12-25',
                modalName:null,
                caiLiaoData:[{
                    caiLiaoName:'SMC单孔重型客井盖座(方形)',
                    caiLiaoCode:'010300314',
                    caiLiaoGuiGe:'15',
                    xqsl:10,
                    shsl:10
                },{
                    caiLiaoName:'钢塑管',
                    caiLiaoCode:'010500394',
                    caiLiaoGuiGe:'DN15 PN10',
                    xqsl:20,
                    shsl:20
                },{
                    caiLiaoName:'钢塑补芯',
                    caiLiaoCode:'010300396',
                    caiLiaoGuiGe:'D40＞15',
                    xqsl:30,
                    shsl:30
                }],
                checkbox: [{
                    value: 'A',
                    checked: true
                }, {
                    value: 'B',
                    checked: true
                }, {
                    value: 'C',
                    checked: false
                }],
            }
        },
        created() {
            console.log(this.modalNameDetail,'modalNameDetail')
        },
        methods: {
            showModal() {
                // this.modalName = 'bottomModal'
				this.$emit('modalNameDetailEmit', 'bottomModal')
            },
            hideModal() {
                // this.modalName = null
				this.$emit('modalNameDetailEmit', null)
            },
			ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
			DelImg(e) {
				uni.showModal({
                    title: '',
                    content: '确定要删除吗？',
                    cancelText: '取消',
                    confirmText: '确认',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            },
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths);
							this.$u.toast("上传成功");
						} else {
							this.imgList = res.tempFilePaths;
						}
					}
				});

			},
			DateChange(e) {
				this.date = e.detail.value
			},
			confirm(){
				this.$u.toast("确认成功");
				// this.modalName = null
				this.$emit("modalNameDetailEmit",null);
			},
            textareaAInput(e){

            }
		}
    }

</script>
<style scoped lang="scss">
.cu-modal{
	z-index: 998;
    text-align: left;
}
.container{
    display: flex;
    flex-direction: column;
}
.scroll-region {
  width: 100%;
  height: 200px; /* 设置滚动区域的高度 */
  overflow-y: auto; /* 仅允许垂直滚动，也可用scroll-y代替 */
}
.cu-avatar{
    background: #fff;
}
.cu-item{
    height: 143px !important;
}
</style>
